import { Checkbox, Form } from "antd";
import { type FC, useEffect } from "react";
import { useDebounceFn, useMemoizedFn } from "ahooks";
import { produce } from "immer";
import { useMemo } from 'react';
import styles from './index.module.scss'
import { useContentStore, useCustomizationStore, useStore } from "@/store";
import { updateCustomization } from "@/service";

interface IndexProps {
  style?: React.CSSProperties
}

const Index: FC<IndexProps> = ({ style }) => {
  const { updateAccentColor, customization } = useCustomizationStore(state => state, (o, n) => {
    return o.customization.applyAccentColor === n.customization.applyAccentColor && o.customization.title === n.customization.title
  })
  const { currentTab } = useStore()

  const { content } = useContentStore(state => state, (o, n) => {
    return currentTab === 'content'
  })
  const { applyAccentColor } = customization
  const [form] = Form.useForm();

  useEffect(() => {
    form.setFieldsValue({
      applyAccentColor,
    })
  }, [applyAccentColor])
  const updateValue = (params) => {
    return updateCustomization({
      ...params,
    })
  }
  const { run } = useDebounceFn(
    (data) => {
      updateValue({
        updates: [
          {
            path: data.path,
            value: data.value,
          },
        ],
        id: customization.id,
      })
    },
    {
      wait: 1000,
    },
  )
  const onChange = useMemoizedFn((v) => {
    const data = produce(customization, (draft) => {
      draft.applyAccentColor = v
    })
    if (customization.id) {
      run({
        path: `applyAccentColor`,
        value: v,
      })
    }
    updateAccentColor(data.applyAccentColor)
  })
  const optionsWithDisabled = useMemo(() => {
    const options = [
      { label: '姓名', value: 'name' },
      { label: '求职岗位', value: 'expJob' },
      { label: '标题', value: 'headings' },
      { label: '详情图标', value: 'icons' },
      { label: '日期', value: 'dates' },

    ];
    if (content.skills && content.skills.entries?.findIndex(item => item.list?.length) !== -1) {
      options.push({ label: '进度条', value: 'progressBars' })
    }
    // if (customization.title?.style !== 'simple') {
    //   options.push({ label: '标题点缀', value: 'titleBkg' })
    // }
    return options
  }, [content.skills, customization.title])
  return (<div className={styles.applyAccentColor } style={style}>
    <div>
      <h5 >点缀色使用范围</h5>
      <div style={{ marginTop: '20px' }}>
        <Form form={form} onValuesChange={(e) => {
          onChange(e.applyAccentColor)
        }}>
          <Form.Item name={'applyAccentColor'}>
            <Checkbox.Group
              options={optionsWithDisabled}
            />
          </Form.Item>
        </Form></div>

    </div>
  </div>);
}

export default Index;
